<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="login-page animation-bg-color-blue">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- 登录标题 -->
                <div class="col-md-6">
                    <div class="info d-flex align-items-center">
                        <div class="content special-title">
                            <h1>欢迎注册</h1>
                            <p>城市预约挂号平台</p>
                        </div>
                    </div>
                </div>
                <!-- 表格信息 -->
                <div class="col-md-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <form>
                                <div class="form-group">
                                    <input id="phone" class="input-material" name="phone" type="text" placeholder="手机号"
                                           required="required" />
                                    <span id="phone-error" class="is-invalid invalid-feedback">Warning</span>
                                </div>
                                <div class="form-group">
                                    <input id="password" class="input-material" name="password" type="password"
                                           placeholder="密码" />
                                    <span id="password-error" class="is-invalid invalid-feedback">Warning</span>
                                </div>
                                <div class="form-group">
                                    <input id="passwordCheck" class="input-material" name="passwordCheck" type="password"
                                           placeholder="确认密码" required="required" />
                                    <span id="passwordC-error" class="is-invalid invalid-feedback">Warning</span>
                                </div>
                                <div class="row form-group">
                                    <input id="input_code" class="input-material col-md-6" name="input_code" type="text" placeholder="请输入6位验证码" />
                                    <input class="input-btn btn col-md-6" type="button" onclick="getMsgNum(this)" value="获取短信验证码" />
                                    <span id="code-error" class="is-invalid invalid-feedback">Warning</span>
                                </div>
                                <input id="reg-btn" class="btn" type="button" value="注册" />
                                <div class="jump-tip">
                                    <small>已有账号？</small>
                                    <a class="hyperlink">登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        /**
         * 定义校验开关
         */
        var flagPhone = false;
        var flagPassword = false;
        var flagCPassword = false;
        var flagCode = false;
        /**
         * 校验手机号码
         */
        $("#phone").blur(function () {
            function checkPhone() {
                //获取用户输入数据
                var phone = $("#phone").val();
                //正则
                var re = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (phone == '') {
                    flagPhone = false;
                    $("#phone-error").show().html("电话号码不能为空！");
                } else if (re.test(phone) == false) {
                    flagPhone = false;
                    $("#phone-error").show().html("你的手机号码是地球的吗？！");
                } else {
                    flagPhone = true;
                    $("#phone-error").hide();
                }
            }
            checkPhone();
        });
        /**
         * 校验密码
         */
        $("#password").blur(function () {
            function checkPassword() {
                //获取用户输入数据
                var password = $("#password").val();
                //正则
                var re = /^\w{6,12}$/;
                if (password == '') {
                    flagPassword = false;
                    $("#password-error").show().html("密码不能为空！");
                } else if (re.test(password) == false) {
                    flagPassword = false;
                    $("#password-error").show().html("密码是6-12位数字、字母和下划线！");
                } else {
                    flagPassword = true;
                    $("#password-error").hide();
                }
            }
            checkPassword();
        });
        /**
         * 比对两次密码是否一致
         */
        $("#passwordCheck").blur(function () {
            function samePassword() {
                //获取用户输入数据
                var passwordCheck = $("#passwordCheck").val();
                var password = $("#password").val();

                if (passwordCheck == password) {
                    flagCPassword = true;
                    $("#passwordC-error").hide();
                } else {
                    flagCPassword = false;
                    $("#passwordC-error").show().html("两次输入密码不一致！");
                }
            }
            samePassword();
        });
        /**
         * 校验验证码
         */
        $("#input_code").blur(function () {
            function checkCode() {
                //获取用户输入数据
                var code = $("#input_code").val();

                if (code == '') {
                    flagCode = false;
                    $("#code-error").show().html("验证码不能为空！");
                } else {
                    flagCode = true;
                    $("#code-error").hide();
                }
            }
            checkCode();
        });
        /**
         * 注册按钮
         */
        $("#reg-btn").click(function () {
            var phone = $('#phone').val();
            var password = $('#password').val();
            var input_code = $('#input_code').val();

            if (flagPhone == true && flagPassword == true && flagCPassword== true && flagCode == true) {
                $.post("/user/userRegister",{
                        phone: phone,
                        password: password,
                        input_code: input_code},
                    function (data) {
                        if (data == "success") {
                            alert("注册成功！前往登录^v^");
                            document.location.assign("/user/login");
                        }else if (data == "exist") {
                            alert("该账号已存在=_=");
                        }else if (data == "error") {
                            alert("验证码不正确，请检查是不是你的手机￣へ￣");
                        } else {
                            alert("验证码已失效，请重新发送");
                        }
                    });
            } else {
                alert("输入信息不正确！");
            }
        });
        /**
         * 登录跳转
         */
        $(".hyperlink").click(function () {
            document.location.assign("/user/login");
        });
    });
    /**
     * 获取验证码
     * @param that
     */
    function getMsgNum(that) {
        var phone = $('#phone').val();
        var time = new Date(); //获取当前时间
        var oldtime = time.getTime()+60000; //设置一分钟后验证码过期时间戳
        setButtonStatus(that); // 设置按钮倒计时

        $.post("/user/sendSms",{phone:phone,oldtime:oldtime},function (data) {
            alert(data);
        })
    }
    /**
     * 设置按钮状态
     */
    var wait = 60; // 短信验证码60秒后才可获取下一个
    function setButtonStatus(that) {
        if (wait == 0) {
            that.removeAttribute("disabled");
            that.value="免费获取验证码";
            wait = 60;
        } else {
            that.setAttribute("disabled", true);
            that.value=wait+"秒后可以重新发送";
            wait--;
            setTimeout(function() {
                setButtonStatus(that)
            }, 1000)
        }
    }
</script>
</html>